<template>
    <view class="period-calendar-container">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text
                    class="u-icon-arrow-left"
                    style="margin-right: 16rpx; font-size: 40rpx"
                    @click="goBack"
                ></text>
                <text class="header-title">经期日历</text>
            </view>
        </view>

        <!-- 主内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 排卵状态卡片 - 优化设计 -->
            <view class="card status-card gradient-bg">
                <view class="status-compact">
                    <view class="status-left">
                        <view class="status-title">排卵日预测</view>
                        <view class="ovulation-day">下次排卵日</view>
                        <view class="ovulation-date">{{ nextOvulationDate }}</view>
                        <view class="status-date">基于您最近6个月的月经周期</view>
                    </view>
                    <view class="status-right">
                        <view class="ovulation-icon">
                            <text class="u-icon-female"></text>
                        </view>
                        <view class="countdown-wrapper">
                            <view class="countdown-number">{{ countdownDays }}</view>
                            <view class="countdown-label">天后</view>
                        </view>
                    </view>
                </view>

                <view class="cycle-progress-section">
                    <view class="cycle-progress-bar">
                        <view
                            class="progress-fill"
                            :style="{ width: progressPercent + '%' }"
                        ></view>
                        <view
                            class="progress-marker"
                            :style="{ left: periodMarkerPercent + '%' }"
                        ></view>
                        <view
                            class="progress-marker current"
                            :style="{ left: currentMarkerPercent + '%' }"
                        ></view>
                        <view
                            class="progress-marker"
                            :style="{ left: ovulationMarkerPercent + '%' }"
                        ></view>
                    </view>
                    <view class="progress-labels">
                        <view class="progress-label">月经期</view>
                        <view class="progress-label highlight">当前</view>
                        <view class="progress-label">排卵期</view>
                        <view class="progress-label">下次月经</view>
                    </view>
                </view>

                <view class="cycle-stats">
                    <view class="cycle-stat-item">
                        <view class="cycle-stat-value">{{ averageCycle }}天</view>
                        <view class="cycle-stat-label">平均周期</view>
                    </view>
                    <view class="cycle-stat-item">
                        <view class="cycle-stat-value">{{ averagePeriod }}天</view>
                        <view class="cycle-stat-label">平均经期</view>
                    </view>
                    <view class="cycle-stat-item">
                        <view class="cycle-stat-value">{{ nextPeriodDateShort }}</view>
                        <view class="cycle-stat-label">下次月经</view>
                    </view>
                </view>
            </view>

            <!-- 日历卡片 -->
            <view class="card calendar-card">
                <!-- 月份选择器 -->
                <view class="month-selector">
                    <view class="month-title">{{ currentYear }}年{{ currentMonth }}月</view>
                    <view class="month-nav">
                        <view class="month-nav-btn" @click="prevMonth">
                            <text class="u-icon-arrow-left"></text>
                        </view>
                        <view class="month-nav-btn" @click="nextMonth">
                            <text class="u-icon-arrow-right"></text>
                        </view>
                    </view>
                </view>

                <!-- 日历 -->
                <view class="calendar">
                    <view class="weekdays">
                        <view v-for="(weekday, index) in weekdays" :key="index">{{ weekday }}</view>
                    </view>
                    <view class="days">
                        <!-- 日期格子，包括上月、本月和下月的日期 -->
                        <view
                            v-for="(day, index) in calendarDays"
                            :key="index"
                            :class="[
                                'day',
                                day.inactive ? 'inactive' : '',
                                day.isToday ? 'today' : ''
                            ]"
                            @click="dayClick(day)"
                        >
                            <view
                                :class="[
                                    'day-inner',
                                    day.isPeriod ? 'day-period' : '',
                                    day.isOvulation ? 'day-ovulation' : '',
                                    day.isFertile ? 'day-fertile' : '',
                                    day.isPredictedPeriod ? 'day-period-predicted' : ''
                                ]"
                            >
                                {{ day.day }}
                            </view>
                            <!-- 标记点，表示痛经、情绪和笔记 -->
                            <view class="day-dots" v-if="day.hasPain || day.hasMood || day.hasNote">
                                <view v-if="day.hasPain" class="day-dot dot-pain"></view>
                                <view v-if="day.hasMood" class="day-dot dot-mood"></view>
                                <view v-if="day.hasNote" class="day-dot dot-note"></view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 日历图例 -->
                <view class="legend">
                    <view class="legend-item">
                        <view class="legend-color color-period"></view>
                        <text>经期</text>
                    </view>
                    <view class="legend-item">
                        <view class="legend-color color-ovulation"></view>
                        <text>排卵日</text>
                    </view>
                    <view class="legend-item">
                        <view class="legend-color color-fertile"></view>
                        <text>易孕期</text>
                    </view>
                    <view class="legend-item">
                        <view class="legend-color color-predicted"></view>
                        <text>预测经期</text>
                    </view>
                </view>
            </view>

            <!-- 周期预测卡片 - 可折叠设计 -->
            <view class="card prediction-card">
                <view class="collapsible-header" @click="toggleFertilePeriodCard">
                    <view class="prediction-title">易孕期详情</view>
                    <text
                        :class="['u-icon-arrow-down', fertilePeriodCardExpanded ? 'active' : '']"
                    ></text>
                </view>

                <view
                    class="collapsible"
                    :style="{ maxHeight: fertilePeriodCardExpanded ? '1000rpx' : '0rpx' }"
                >
                    <view class="prediction-dates">
                        <view class="prediction-date-item">
                            <view class="prediction-date-label">上次月经</view>
                            <view class="prediction-date-value">{{ lastPeriodDateShort }}</view>
                        </view>
                        <view class="prediction-date-item highlight">
                            <view class="prediction-date-label">排卵日</view>
                            <view class="prediction-date-value">{{ ovulationDateShort }}</view>
                        </view>
                        <view class="prediction-date-item">
                            <view class="prediction-date-label">下次月经</view>
                            <view class="prediction-date-value">{{ nextPeriodDateShort }}</view>
                        </view>
                    </view>

                    <view class="fertile-period">
                        <view class="fertile-icon">
                            <text class="u-icon-calendar"></text>
                        </view>
                        <view class="fertile-info">
                            <view class="fertile-title">您的易孕期: {{ fertilePeriodRange }}</view>
                            <view class="fertile-desc"
                                >易孕期是指排卵日前后几天，这段时间同房受孕几率最高。
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 备孕小贴士卡片 - 可折叠设计 -->
            <view class="card tips-card">
                <view class="collapsible-header" @click="toggleTipsCard">
                    <view class="tips-header">备孕小贴士</view>
                    <text :class="['u-icon-arrow-down', tipsCardExpanded ? 'active' : '']"></text>
                </view>

                <view
                    class="collapsible"
                    :style="{ maxHeight: tipsCardExpanded ? '1000rpx' : '0rpx' }"
                >
                    <view class="tips-item">
                        <view class="tips-icon">
                            <text class="u-icon-thermometer"></text>
                        </view>
                        <view class="tips-content">
                            <view class="tips-title">坚持测量基础体温</view>
                            <view class="tips-desc"
                                >每天早晨醒来后、起床前测量，可更准确预测排卵期。
                            </view>
                        </view>
                    </view>

                    <view class="tips-item">
                        <view class="tips-icon">
                            <text class="u-icon-water-drop"></text>
                        </view>
                        <view class="tips-content">
                            <view class="tips-title">留意宫颈粘液变化</view>
                            <view class="tips-desc"
                                >排卵期宫颈粘液通常增多且呈蛋清状，更有利于精子存活。
                            </view>
                        </view>
                    </view>

                    <view class="tips-item">
                        <view class="tips-icon">
                            <text class="u-icon-heart"></text>
                        </view>
                        <view class="tips-content">
                            <view class="tips-title">把握最佳同房时机</view>
                            <view class="tips-desc"
                                >排卵前1-2天同房，受孕几率最高，每隔1-2天一次为宜。
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 底部边距 -->
            <view style="height: 120rpx"></view>
        </scroll-view>

        <!-- 悬浮按钮 -->
        <view class="fab-button" @click="addRecord">
            <text class="u-icon-plus"></text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 排卵状态数据
            nextOvulationDate: '2023-07-15',
            countdownDays: 9,
            progressPercent: 45,
            periodMarkerPercent: 20,
            currentMarkerPercent: 45,
            ovulationMarkerPercent: 65,
            averageCycle: 28,
            averagePeriod: 5,
            nextPeriodDateShort: '7/29',
            lastPeriodDateShort: '6/1',
            ovulationDateShort: '7/15',
            fertilePeriodRange: '7/12 - 7/18',

            // 折叠卡片状态
            fertilePeriodCardExpanded: false,
            tipsCardExpanded: false,

            // 日历数据
            weekdays: ['日', '一', '二', '三', '四', '五', '六'],
            currentYear: 2023,
            currentMonth: 6,
            calendarDays: []
        }
    },
    created() {
        this.generateCalendar()
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        addRecord() {
            // 添加经期记录功能
            uni.navigateTo({
                url: '/periodPage/pages/period_record'
            })
        },
        dayClick(day) {
            // 日期点击事件
            if (day.inactive) return

            console.log('点击了日期:', day)
            // 可以在这里添加日期点击后的操作，例如打开编辑页面等
        },
        prevMonth() {
            if (this.currentMonth === 1) {
                this.currentYear--
                this.currentMonth = 12
            } else {
                this.currentMonth--
            }
            this.generateCalendar()
        },
        nextMonth() {
            if (this.currentMonth === 12) {
                this.currentYear++
                this.currentMonth = 1
            } else {
                this.currentMonth++
            }
            this.generateCalendar()
        },
        generateCalendar() {
            const year = this.currentYear
            const month = this.currentMonth

            // 当前月的第一天是星期几
            const firstDay = new Date(year, month - 1, 1).getDay()
            // 当前月的天数
            const daysInMonth = new Date(year, month, 0).getDate()
            // 上个月的天数
            const daysInPrevMonth = new Date(year, month - 1, 0).getDate()

            const days = []

            // 添加上个月的日期
            for (let i = firstDay - 1; i >= 0; i--) {
                days.push({
                    day: daysInPrevMonth - i,
                    inactive: true
                })
            }

            // 添加当前月的日期
            const today = new Date()
            const currentDate = today.getDate()
            const isCurrentMonth = today.getFullYear() === year && today.getMonth() + 1 === month

            // 模拟数据 - 实际应用中应该从API获取
            const periodDays = [1, 2, 3, 4, 5] // 经期天数
            const ovulationDay = 15 // 排卵日
            const fertileDays = [13, 14, 16, 17] // 易孕期天数
            const predictedPeriodDays = [29, 30] // 预测经期天数
            const painDays = [1] // 痛经天数
            const moodDays = [2] // 情绪记录天数
            const noteDays = [15] // 笔记天数

            for (let i = 1; i <= daysInMonth; i++) {
                days.push({
                    day: i,
                    isToday: isCurrentMonth && i === currentDate,
                    isPeriod: periodDays.includes(i),
                    isOvulation: i === ovulationDay,
                    isFertile: fertileDays.includes(i),
                    isPredictedPeriod: predictedPeriodDays.includes(i),
                    hasPain: painDays.includes(i),
                    hasMood: moodDays.includes(i),
                    hasNote: noteDays.includes(i)
                })
            }

            // 计算需要添加下个月的天数来填充6行日历
            const totalDaysNeeded = 42 // 6行 x 7天
            const remainingDays = totalDaysNeeded - days.length

            // 添加下个月的日期
            for (let i = 1; i <= remainingDays; i++) {
                days.push({
                    day: i,
                    inactive: true
                })
            }

            this.calendarDays = days
        },
        toggleFertilePeriodCard() {
            this.fertilePeriodCardExpanded = !this.fertilePeriodCardExpanded
        },
        toggleTipsCard() {
            this.tipsCardExpanded = !this.tipsCardExpanded
        }
    }
}
</script>

<style lang="scss">
.period-calendar-container {
    background-color: #f5f5f5;
    position: relative;
    min-height: 100vh;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 36rpx;
    font-weight: 500;
}

.main-content {
    height: calc(100vh - 112rpx);
    overflow-y: auto;
    padding-bottom: 32rpx;
}

/* 统一的卡片样式 */
.card {
    background-color: #ffffff;
    border-radius: 24rpx;
    margin: 24rpx 32rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.fab-button {
    position: fixed;
    right: 40rpx;
    bottom: 60rpx;
    width: 112rpx;
    height: 112rpx;
    border-radius: 56rpx;
    background-color: #ff9fb5;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 20rpx rgba(255, 159, 181, 0.4);
    z-index: 10;
}

.u-icon-plus,
.u-icon-arrow-left,
.u-icon-arrow-right,
.u-icon-arrow-down,
.u-icon-female,
.u-icon-calendar,
.u-icon-thermometer,
.u-icon-water-drop,
.u-icon-heart {
    font-size: 40rpx;
}

/* 排卵状态卡片样式 - 优化设计 */
.status-card {
    padding: 28rpx;
    margin-bottom: 16rpx;
}

/* 渐变背景 */
.gradient-bg {
    background: linear-gradient(135deg, #fff5f8 0%, #ffffff 100%);
    border: 2rpx solid #fff0f4;
}

/* 紧凑布局 */
.status-compact {
    display: flex;
    margin-bottom: 20rpx;
}

.status-left {
    flex: 1;
}

.status-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20rpx;
}

.status-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
}

.status-date {
    color: #999;
    font-size: 24rpx;
    margin-top: 12rpx;
}

.ovulation-day {
    font-size: 26rpx;
    font-weight: 600;
    color: #666;
}

.ovulation-date {
    font-size: 36rpx;
    font-weight: 600;
    color: #ff9fb5;
    margin-top: 4rpx;
}

.ovulation-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #fff8e1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;
    color: #ffb74d;
}

.countdown-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-number {
    font-size: 44rpx;
    font-weight: 700;
    color: #ff9fb5;
    line-height: 1;
}

.countdown-label {
    font-size: 24rpx;
    color: #666;
    margin-top: 4rpx;
}

.cycle-progress-section {
    margin-bottom: 20rpx;
}

.cycle-progress-bar {
    height: 12rpx;
    background-color: #f0f0f0;
    border-radius: 6rpx;
    margin-bottom: 8rpx;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #ffb74d;
    border-radius: 6rpx;
}

.progress-marker {
    position: absolute;
    top: -3rpx;
    width: 18rpx;
    height: 18rpx;
    border-radius: 9rpx;
    background-color: #ffb74d;
    transform: translateX(-50%);
}

.progress-marker.current {
    background-color: #ff9fb5;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 22rpx;
    color: #999;
}

.progress-label.highlight {
    color: #ff9fb5;
    font-weight: 500;
}

.cycle-stats {
    display: flex;
    padding-top: 20rpx;
    border-top: 2rpx solid #f0f0f0;
}

.cycle-stat-item {
    flex: 1;
    text-align: center;
}

.cycle-stat-value {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
}

.cycle-stat-label {
    font-size: 22rpx;
    color: #999;
    margin-top: 4rpx;
}

/* 日历卡片样式 */
.calendar-card {
    padding: 0;
}

/* 月份选择器样式 */
.month-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    background-color: #fff;
    border-bottom: 2rpx solid #f0f0f0;
}

.month-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
}

.month-nav {
    display: flex;
    gap: 32rpx;
    align-items: center;
}

.month-nav-btn {
    width: 56rpx;
    height: 56rpx;
    border-radius: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #666;
}

/* 日历样式 */
.calendar {
    padding: 20rpx 32rpx;
    background-color: #fff;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 24rpx;
    color: #999;
    padding-bottom: 16rpx;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 4rpx;
}

.day {
    height: 90rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    position: relative;
}

.day.inactive {
    color: #ccc;
}

.day.today {
    font-weight: bold;
}

.day-inner {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30rpx;
}

.day-period {
    background-color: #ff9fb5;
    color: white;
}

.day-ovulation {
    background-color: #ffb74d;
    color: white;
}

.day-fertile {
    background-color: #fff8e1;
    color: #ffb74d;
}

.day-period-predicted {
    border: 2rpx dashed #ff9fb5;
    color: #ff9fb5;
}

.day-dots {
    display: flex;
    position: absolute;
    bottom: 6rpx;
    gap: 6rpx;
}

.day-dot {
    width: 8rpx;
    height: 8rpx;
    border-radius: 4rpx;
}

.dot-pain {
    background-color: #f44336;
}

.dot-mood {
    background-color: #ba68c8;
}

.dot-note {
    background-color: #64b5f6;
}

/* 图例样式 */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    padding: 24rpx 32rpx;
    background-color: #fff;
    border-top: 2rpx solid #f0f0f0;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    margin-right: 16rpx;
}

.legend-color {
    width: 24rpx;
    height: 24rpx;
    border-radius: 12rpx;
    margin-right: 8rpx;
}

.color-period {
    background-color: #ff9fb5;
}

.color-ovulation {
    background-color: #ffb74d;
}

.color-fertile {
    background-color: #fff8e1;
    border: 2rpx solid #ffb74d;
}

.color-predicted {
    border: 2rpx dashed #ff9fb5;
    background-color: white;
}

/* 可折叠卡片样式 */
.prediction-card,
.tips-card {
    padding: 32rpx;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.prediction-title,
.tips-header {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
}

.collapsible-header .u-icon-arrow-down {
    transition: transform 0.3s ease;
}

.collapsible-header .u-icon-arrow-down.active {
    transform: rotate(180deg);
}

.collapsible {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* 易孕期卡片样式 */
.prediction-dates {
    display: flex;
    gap: 20rpx;
    margin-top: 32rpx;
}

.prediction-date-item {
    flex: 1;
    background-color: #f9f9f9;
    border-radius: 16rpx;
    padding: 24rpx;
    text-align: center;
}

.prediction-date-label {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 12rpx;
}

.prediction-date-value {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
}

.prediction-date-item.highlight {
    background-color: #fff8e1;
}

.prediction-date-item.highlight .prediction-date-label {
    color: #ffb74d;
}

.prediction-date-item.highlight .prediction-date-value {
    color: #f57c00;
}

.fertile-period {
    display: flex;
    margin-top: 32rpx;
    padding: 24rpx;
    background-color: #f0f8ff;
    border-radius: 16rpx;
}

.fertile-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #e3f2fd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    color: #2196f3;
}

.fertile-info {
    flex: 1;
}

.fertile-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #2196f3;
    margin-bottom: 8rpx;
}

.fertile-desc {
    font-size: 26rpx;
    color: #666;
}

/* 备孕小贴士样式 */
.tips-item {
    display: flex;
    margin-top: 32rpx;
    margin-bottom: 24rpx;
    padding-bottom: 24rpx;
    border-bottom: 2rpx solid #f0f0f0;
}

.tips-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.tips-item:first-child {
    margin-top: 24rpx;
}

.tips-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 32rpx;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    color: #ff9fb5;
}

.tips-content {
    flex: 1;
}

.tips-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
}

.tips-desc {
    font-size: 26rpx;
    color: #666;
}
</style>
